<template>
  <div class="schoolExhibition">
    <!--  导航开始 -->
    <commonHeader
      :title="title"
      @goBack="goBack()">
    </commonHeader>
    <div class="content">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <!--    未报名-->
        <div>
          <!--        下拉刷新上拉加载-->
          <van-list
            v-if="schoolList&&schoolList.length*1>0"
            v-model="loading"
            :finished="finished"
            :offset="20"
            :immediate-check="false"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <!--      分校驿站列表-->
            <div class="schoolList" v-if="isChoosedSchoolShow">
              <div class="listItems flex-start borderBottom"
                   v-for="(item,index) in schoolList"
                   :key="item.id"
                   @click="toDetails(item)">
                <div class="schoolImg">
                  <img :src="item.img" alt="">
                </div>
                <div class="listContent">
                  <div class="listTitle oneDot">{{item.school_name}}</div>
                  <div v-if="item.address" class="listAddress oneDot">{{item.address}}</div>
                  <div v-if="item.tel" class="listPhone">电话：{{item.tel}}</div>
                  <div class="listNumber flex-space-between">
                    <div v-if="item.already_num">已报名：{{item.already_num}}人</div>
                    <div v-if="item.distance">{{item.distance}}KM</div>
                  </div>
                </div>
              </div>
            </div>
          </van-list>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
  import commonHeader from "../../components/common/commonHeader.vue"
  import {ISSINGUP,GETSCHOOLLIST} from "../../apis/oldUniversity"
  import {getStore, setStore} from "../../commonUtil/mUtils";
  export default {
    name:"schoolExhibition",
    components:{
      commonHeader
    },
    data() {
      return {
        title:"全国校园展播",
        is_signup:0,// is_signup 是否报名 0未报名 1已报名
        isChoosedSchoolShow:true,//是否选择分校列表
        schoolList:[],//学校列表
        school_name:"",//报名成功的学校名
        position:{},//用户地址
        // 上拉加载下拉刷新配置
        loading: false,//
        finished: false,//上拉加载完毕
        refreshing: false,//下拉刷新
        page:1,//分页页数
        pageSize:10,//每页数据
      }
    },
    mounted() {
      // 把路径里面的token 存起来
      let token = this.$route.query.token?this.$route.query.token:''
      if(getStore('token')!='undefined'){
        setStore('token',token);
      }
      // 学校列表
      this.getSchoolList()
    },
    methods:{
      // 返回
      goBack(){
        // 返回APP
        if (this.systemInfo() === "android") {
          window.android.closeCurrentPage();
        } else if (this.systemInfo() === "ios") {
          window.webkit.messageHandlers.closeCurrentPage.postMessage(null);
        }
      },
      // 去详情页
      toDetails(item){
        this.$router.push({
          name:"schoolExhibitionDetails",
          query:{
            title:item.school_name,
            id:item.school_id
          }
        })
      },
      //-------------------------- 接口开始 --------------------
      // 获取学校列表
      getSchoolList(){
        let getSchoolList = GETSCHOOLLIST
        let params = {
          type:1,//0 老年大学总校 1分校 目前只传1
          lon:this.position.longitude?this.position.longitude:'116.523852',//经度
          lat:this.position.latitude?this.position.latitude:'39.933697',//纬度
          page:this.page,//页码
        }
        getSchoolList(params).then( res => {
          if(res.data.code*1===200){
            // 下拉刷新
            if (this.refreshing) {
              this.schoolList = [];
              this.refreshing = false;
            }
            this.loading = false;
            const schoolList = res.data.data;//学校列表
            if(schoolList == null || schoolList.length*1 === 0){
              this.finished = true
              return
            }
            if(schoolList.length*1 < this.pageSize){
              this.finished = true
            }
            if(this.page*1 == 1){
              this.schoolList = schoolList
            }else{
              this.schoolList = this.schoolList.concat(schoolList)
            }
            console.log(this.schoolList)
          } else {
            this.$toast(res.data.message);
          }
        }).catch(error => {
          console.log(error)
        })
      },
      // 上拉加载
      onLoad() {
        this.page++;
        this.getSchoolList();//获取学校列表
      },
      // 下拉刷新
      onRefresh() {
        // 清空列表数据
        this.finished = false;

        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.page=1;
        this.getSchoolList();//获取课程列表
      },
      // --------------------------接口结束 -------------------
    },
    watch:{

    }
  }
</script>

<style lang="less" scoped>
  @import (reference) url(../../assets/less/common);
  .schoolExhibition{
    width:100%;
    padding:1.38rem 0.3rem 0.3rem 0.3rem;
    box-sizing: border-box;
    .content{
      width:100%;
      .haveSignUp{
        width:100%;
        height: 4rem;
        font-size: @fontSize34;
        font-family: @fontFamily500;
        font-weight: @fontWeight400;
        color:@whiteColor;
        flex-direction: column;
        span{
          font-size: @fontSize30;
        }
      }
      .schoolList{
        width:100%;
        .listItems{
          width:100%;
          padding:0.3rem 0;
          box-sizing: border-box;
          .schoolImg{
            width:2.9rem;
            height: 1.95rem;
            border-radius: 0.1rem;
            margin-right:0.2rem;
            position: relative;
            img{
              max-width: 100%;
              max-height: 100%;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              border-radius: 0.1rem;
            }
          }
          .listContent{
            flex:1;
            height:1.95rem;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            flex-direction: column;
            div{
              font-size: @fontSize28;
              font-family: @fontFamily400;
              font-weight: @fontWeight400;
              color:rgba(255,255,255,0.8);
              line-height: 0.46rem;
            }
            .listTitle{
              width:3.75rem;
              font-size: @fontSize34;
              font-family: @fontFamily400;
              font-weight: @fontWeight500;
              color:@whiteColor;
              margin-bottom:0.16rem;
            }
            .listAddress{
              width:3.75rem;
            }
            .listNumber{
              width:100%;
            }
          }
        }
        .listItems:nth-last-of-type(1){
          border-bottom: none;
        }
      }
      .borderBottom{
        border-bottom: 0.02rem solid rgba(255,255,255,0.4);
      }
      /deep/.van-overlay{
        z-index:110;
        background:#000000;
      }
    }
  }
</style>
